<div class="comment-list">
    <ul class="message-item">
        {% for comment in all_comments %}
            <li class="layui-row">
                <div class="layui-col-md1">
                    <img src="{{ url_for('static',filename='images/dog.jpg') }}" alt="dog">
                </div>
                <div class="layui-col-md11">
                    <strong>{{ comment.visitor_name }}</strong>
                    <div style="margin: 10px 0">
                        <p>{{ comment.content }}</p>
                    </div>
                    <div class="list_bottom">
                        <span>{{ comment.add_time | strftime_comment }}</span>
                        <span class="layui-badge-rim">{{ comment.visitor_address | address }}</span>
                        <button type="button"
                                class="layui-btn-xs layui-btn layui-btn-primary comment_reply"
                                data-comment-id="{{ comment.id }}">回复
                        </button>
                    </div>
                    {% if comment.replies %}
                        <ul class="message-item" style="margin: 10px 0">
                            {% for reply in comment.replies %}
                                <li class="layui-row">
                                    <div class="layui-col-md1">
                                        <img src="{{ url_for('static',filename='images/xyx.jpg') }}" alt="">
                                    </div>
                                    <div class="layui-col-md11" id="rpy{{ reply.id }}">
                                        {% if reply.reply_target_name %}
                                            <strong>{{ reply.visitor_name }}@{{ reply.reply_target_name }}</strong>
                                        {% else %}
                                            <strong>{{ reply.visitor_name }}</strong>
                                        {% endif %}
                                        <div style="margin: 10px 0">
                                            <p>{{ reply.content }}</p>
                                        </div>
                                        <div class="list_bottom">
                                            <span>{{ reply.add_time }}</span>
                                            <span class="layui-badge-rim">{{ reply.visitor_address | address }}</span>
                                            <button type="button"
                                                    class="layui-btn-xs layui-btn layui-btn-primary comment_reply"
                                                    data-comment-id="{{ reply.id }}">回复
                                            </button>
                                        </div>
                                    </div>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </div>
            </li>
        {% endfor %}
    </ul>
</div>

<script type="text/html" id="reply_box">
    {% include 'blogs/module/comment_reply.html' %}
</script>
<script>
    let reply_comment_id

    layui.use(() => {
        let $ = layui.$
        $('.comment_reply').click((e) => {
            $('.comment-reply').remove()
            let target = e.target
            reply_comment_id = target.attributes['data-comment-id'].value
            let parentElement = target.parentNode;
            $(parentElement).after($('#reply_box').html())
        })
    })
</script>